在 Vue 3 中，單元測試（Unit Testing）和端到端測試（End-to-End Testing, E2E）是提升代碼質量和確保應用穩定性的重要工具。單元測試著重於驗證單個元件或函數的功能，而端到端測試則模擬實際用戶操作，測試整體應用的工作流。以下將逐步介紹如何在 Vue 3 中實現這兩種類型的測試。

Vue 3 中的單元測試

單元測試主要是針對特定的功能點進行測試，例如元件的顯示狀態、函數邏輯或事件觸發結果。Vue 3 通常使用 Vue Test Utils 搭配 Jest 來進行單元測試。

1. 安裝測試工具
   首先安裝 Vue Test Utils 和 Jest，使用 npm 命令如下：

npm install @vue/test-utils jest

2. 創建測試檔案
   為 Vue 元件創建單元測試檔案，通常位於 tests/unit 資料夾中。假設我們要測試 HelloWorld.vue 元件，則在 tests/unit/HelloWorld.spec.js 中編寫測試代碼。

3. 編寫測試代碼
   以下是一個簡單的測試範例，測試 HelloWorld.vue 是否能夠正確渲染傳遞的屬性（props）：

import { mount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'Hello Vue 3';
    const wrapper = mount(HelloWorld, {
      props: { msg }
    });
    expect(wrapper.text()).toContain(msg);
  });
});

在這段測試中，我們使用 mount 方法渲染元件，並檢查是否包含傳入的 msg prop 值。這樣可以驗證元件的渲染邏輯是否正確。

4. 執行測試
   在 package.json 中新增測試腳本：

"scripts": {
  "test:unit": "jest"
}

執行以下命令運行單元測試：

npm run test:unit

單元測試的優勢在於測試範圍小、執行速度快，便於快速驗證代碼的正確性。

Vue 3 中的端到端測試

端到端測試則著重於整體應用的用戶操作流程，確保在多個元件之間的交互中應用能夠正常運行。Vue 應用的端到端測試常用 Cypress 作為測試框架。

1. 安裝 Cypress
   首先安裝 Cypress，使用 npm 命令如下

npm install cypress --save-dev

2. 配置 Cypress
   安裝完成後，運行以下命令來啟動 Cypress 設置頁面：

npx cypress open

這會自動生成 Cypress 的測試目錄 cypress/integration，其中可以添加測試用例。

3. 編寫端到端測試
   假設我們有一個登錄頁面，需要測試用戶從輸入帳號密碼到成功登錄的完整流程，可以創建 cypress/integration/login.spec.js 檔案來編寫測試：

describe('Login Flow', () => {
  it('logs in successfully', () => {
    cy.visit('/login');
    cy.get('input[name="username"]').type('testuser');
    cy.get('input[name="password"]').type('password123');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
    cy.contains('Welcome, testuser').should('be.visible');
  });
});

在這段代碼中，cy.visit 導航至登錄頁面，cy.get 選擇元素並執行操作，cy.url().should 和 cy.contains 則用於驗證操作結果。

4. 執行端到端測試
   在 package.json 中新增端到端測試腳本：

"scripts": {
  "test:e2e": "cypress open"
}

運行以下命令來啟動 Cypress 測試界面：

npm run test:e2e

啟動後可以選擇測試用例，Cypress 將會自動啟動瀏覽器並運行測試。

單元測試與端到端測試的整合
單元測試與端到端測試各有側重，可以互為補充。在一個大型應用中，單元測試幫助確保每個元件和函數的邏輯正確，而端到端測試則確保應用的關鍵用戶流程順利進行。兩者結合使用可以有效提升應用的穩定性和代碼質量。

自動化測試的好處
隨著項目增大，手動測試難以覆蓋到所有功能。自動化測試能夠快速重複運行，降低人為錯誤，同時在持續集成（CI）管道中運行測試，可以即時監控代碼變更對應用的影響，達到即時檢查和持續改進的效果。

總結
在 Vue 3 中進行單元測試與端到端測試，不僅可以增強代碼的可維護性，也能有效地在開發過程中及早發現潛在問題。單元測試與端到端測試的結合使用，可以確保應用在細節和整體流程上都達到最佳效果，提升產品質量並增加用戶信任感。